<template>
	<view class="flex-center" @click="$emit('click',$event)" :style="{width:`calc(${size} * 2rpx)`,height:`calc(${size} * 2rpx `}" >
		<image v-if="path" :src="path" mode="widthFix" :style="{width:`calc(${size} * 2rpx)`}"></image>
		<u-icon v-else :size="size" :color="color" :name="name"></u-icon>
	</view>
</template>

<script>
	export default {
		name:"z-icon",
		props:{
			name:String,
			color:{
				type:String,
				default:"black"
			},
			size:{
				type:[Number,String],
				default:14
			},
			isImage:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				
			};
		},
		computed:{
			path(){
				let files=require.context('@/static/img/icon',false).keys()
				let bg=require.context('@/static/img/bg',false).keys()
				if(this.name){
					let overPath=`./${this.name}-icon.png`
					if(files.indexOf(overPath)>-1){
						return `/static/img/icon/${this.name}-icon.png`
					}
					let otherPath=`./${this.name}.png`
					if(files.indexOf(otherPath)>-1){
						return `/static/img/icon/${this.name}.png`
					}
					if(bg.indexOf(otherPath)>-1){
						return `/static/img/bg/${this.name}.png`
					}
				}
				return;
			}
		},
		mounted() {
			
			
		}
	}
</script>

<style lang="scss">

</style>